<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>
		<view v-for="(mod, mk) in modData" :class="mod.mod_class" :style="mod.css" class="mod-padding">
			<view class="collect-section" v-if="mod.name == 'collect'" :style="{ '--app-color': app_color }">
				<view class="collect-list-item" v-for="list in collectList" @click="click(list)">
					<view class="collect-image-wrapper" @click="click(list)">
						<image style="width: 200rpx; height: 200rpx;" :src="list.img" mode="aspectFill"></image>
					</view>
					<view class="collect-info-wrapper" @click="click(list)">
						<view class="collect-header">
							<text class="collect-title u-line-2">{{ list.title }}</text>
						</view>
						<!-- 商品标签 -->
						<view class="collect-tabs">
							<!-- <view class="tabs-item">包邮</view> -->
							<!-- <view class="tabs-item">两件9折</view> -->
						</view>
						<view class="collect-footer">
							<text class="collect-price">￥<text style="font-size: 32rpx;font-weight: bold;">{{ list.price
							}}</text></text>
						</view>
					</view>
					<view class="collect-control-wrapper">
						<view class="collect-delete-btn" @click.stop="del(list.goods_id)">
							<u-icon name="trash" :color="app_color" size="32rpx"></u-icon>
						</view>
						<view class="collect-cart-btn" @click.stop="openBuy(list.goods_id)">
							<u-icon style="justify-content: center;" name="shopping-cart-fill" color="#F1454D"
								size="48rpx"></u-icon>
						</view>
					</view>
				</view>
				<u-empty v-if="!collectList.length" text="没有更多内容..." iconSize="0">
				</u-empty>
				<u-modal :show="show" @cancel="show = false" @confirm="del()" content="确定要删除吗？删除后无法恢复"
					confirmColor="#2979ff" :showCancelButton="true"></u-modal>
			</view>
			<moxi-index v-else :list="mod"></moxi-index>
		</view>

		<goods-buy ref="goods_buy" :content="data"></goods-buy>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			collectList: [],
			delGoods_id: "",
		}
	},
	created() {
		this.get();
	},
	methods: {
		openBuy(data) {
			this.$refs.goods_buy.open(data)
		},
		get() {
			let self = this;
			this.moxiPost('/plugin/mall/user/collect/get', {}, function (data) {
				self.collectList = data.data;
			})
		},
		click(list) {
			this.navto('page_mall/goods/info?id=' + list.goods_id, false, list.appid, list.data_module)
		},
		del(id = false) {
			if (this.show) {
				this.show = false;
				let self = this;
				this.moxiPost('/plugin/mall/user/collect/collect', { goods_id: this.delGoods_id }, function (data) {
					self.get()
					self.msg(data.hint)
				})
			} else {
				this.show = true;
				this.delGoods_id = id;
			}

		}
	}
}
</script>

<style lang="scss" scoped>
.mod-padding {
	padding: 32rpx 16rpx 0;
}

.collect-section {
	display: flex;
	flex-direction: column;
	gap: 24rpx;

	.collect-list-item {
		display: flex;
		flex-direction: row;
		background: #fff;
		padding: 20rpx 24rpx;

		.collect-image-wrapper {
			flex-shrink: 0;
			width: 200rpx;
			height: 200rpx;
			border-radius: 12rpx;
			overflow: hidden;

			& image {
				width: 100%;
				height: 100%;
				border-radius: 4px;
			}
		}

		.collect-info-wrapper {
			display: flex;
			flex-direction: column;
			margin: 0 20rpx;
			justify-content: center;
			flex: 1;

			.collect-header {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-bottom: 16rpx;

				.collect-title {
					font-size: 24rpx;
					color: #000;
				}

				.collect-delete-btn {
					width: 20px;
					margin-left: 5px;
				}
			}

			.collect-tabs {
				display: flex;
				flex-direction: row;
				align-items: center;
				color: #fff;
				font-size: 20rpx;
				gap: 16rpx;
				white-space: nowrap;
				flex-wrap: wrap;
				margin-bottom: 16rpx;

				.tabs-item {
					padding: 0 16rpx;
					background-color: var(--app-color);
					border-radius: 99px;
				}
			}

			.collect-footer {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.collect-price {
					color: var(--app-color);
					font-size: 20rpx;
				}
			}
		}

		.collect-control-wrapper {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.collect-delete-btn {
				padding: 16rpx;
				background-color: #F5F5F5;
				border-radius: 99px;
			}
		}
	}
}
</style>